<template>
  <div class="login-page">
    <div class="pic-content">
      <div class="pic"></div>
    </div>
    <div class="form-content">
      <div class="login-form">
        <div class="title-box">
          <div class="title"><span class="high-light">自助</span>洗车后台管理</div>
          <div class="desc">登录账户来继续操作</div>
        </div>
        <a-form
            layout="vertical"
            :model="formState"
            ref="loginForm">
          <a-form-item
              label=""
              name="userName"
              :rules="[{ required: true, trigger: 'blur', message: '请输入账号' }]">
            <a-input size="large" v-model:value="formState.userName" placeholder="请输入账号">
              <template #prefix>
                <i class="iconfont-uat icon-uav-yonghuming"/>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item
              label=""
              name="password"
              :rules="[{ required: true, message: '请输入密码' }]">
            <a-input-password size="large" v-model:value="formState.password" placeholder="请输入密码" @pressEnter="handleLogin">
              <template #prefix>
                <i class="iconfont-uat icon-uav-mima"/>
              </template>
            </a-input-password>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" :loading="loading" size="large" @click="handleLogin">登录</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import {useRouter} from 'vue-router';
import HighButton from '../components/hign-button.vue'
import loginApi from '../api/login';
import {ResDto} from "../types/common";
import common from "../common/common";
import {message} from 'ant-design-vue';

interface FormState {
  userName: string;
  password: string;
}
const formState = reactive<FormState>({
  userName: '',
  password: '',
});
const loginForm = ref()
const router = useRouter();
const loading = ref(false)
const handleLogin = async () => {
  try {
    await loginForm.value.validateFields();
    loading.value = true;
    loginApi.login({
      userName: formState.userName,
      password: formState.password,
      userType: 'bus'
    }).then((res: ResDto) => {
      loading.value = false;
      if (res.content && res.content.token) {
        common.setLocalToken(res.content.token)
        common.setLocalUser(res.content)
        common.setLocalRoleAuth(res.content.userRoleMenuDTOList || [])
        router.replace('/manage/shop')
      } else {
        let msg = '登录失败'
        if (res.errors && res.errors.length && res.errors[0].message) {
          msg = res.errors[0].message
        }
        message.error(msg)
      }
    }).catch((e: any) => {
      loading.value = false;
      let msg = '登录异常'
      if (e.errors && e.errors.length && e.errors[0].message) {
        msg = e.errors[0].message
      }
      message.error(msg)
    })
  } catch (errorInfo) {
    console.log('Failed:', errorInfo);
  }
}
</script>

<style scoped lang="less">
@import "../assets/styles/var.less";
.login-page{
  position: relative;
  width: 100%;
  height: 100%;
  background: #d7e5f9;
  display: flex;
  .pic-content{
    position: relative;
    width: 62%;
    height: 100%;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    .pic{
      position: relative;
      width: 100%;
      height: 100%;
      background: url("../assets/img/login.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .form-content{
    position: relative;
    flex: 1;
    height: 100%;
    background: #f0f3f7;
    padding: 0 5%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.login-form{
  position: relative;
  width: 100%;
  .title-box{
    padding-bottom: 18px;
    .title{
      font-size: 32px;
      color: #000000;
      font-weight: bold;
    }
    .desc{
      font-size: 14px;
      color: @textGreyColor;
    }
  }
  .ant-form-item-has-error{
    .ant-input-affix-wrapper{
      background: #fff;
      color: #585858;
      &:hover{
        background-color: #fff;
      }
      :deep(.ant-input) {
        background-color: #fff;
        color: #585858;
      }
    }
  }
  .ant-input-affix-wrapper{
    background: #fff;
    color: #585858;
    border-radius: 50px;
    &:hover{
      background-color: #fff;
    }
    :deep(.ant-input) {
      background-color: #fff;
      color: #585858;
    }
  }
}
.high-light{
  color: @primaryColor;
}

.ant-form-item{
  .ant-btn{
    width: 100%;
    border-radius: 50px;
  }
  //margin-bottom: 15px;
}
</style>
